import React, { Component, Fragment } from "react";
import { withRouter } from "react-router";
import axios from "axios";
import {
  LOGIN,
  REGISTER,
  AUTHORIZATION,
  FACELOGIN,
  SEARCHTHING
} from "../../service/api/AdminApi.js";
import { inject, observer } from "mobx-react";
import { Button, message, Checkbox } from "antd";
import $ from "jquery"; //为了适配
import { Link } from "react-router-dom";
@inject("AdminStore")
@observer
@withRouter
export class Admin extends React.Component {
  constructor(props) {
    super(props);
    //当组建的state或者props发生改变的时候，render函数就会重新执行
    this.state = {
      username: "", //login
      password: "", //login
      registUsername: "", //注册
      registPassword: "", //注册
      registPhone: "",
      registEmail: "",
      registpassword: "",
      registConfirmPassword: "",
      list: [],
      confirmDirty: false,
      autoCompleteResult: [],
      showClause: false,
      loginDisplay: true,
      confirmDirty: false,
      showConfirmPasswordIcon: false,
      showPhoneIcon: false,
      showEmailIcon: false,
      agreed: false,
      showPasswordIcon: false,
      showClause: false,
      rememberPassword: false,
      typeLogin: "",
      show_private_clause: false,
      username_warning: "",
      phone_warning: "",
      email_warning: "",
      password_warning: "",
      confirm_password_warning: "",
      regist_username_ok: false,
      regist_phone_ok: false,
      regist_email_ok: false,
      regist_password_ok: false,
      regist_confirm_password_ok: false,
      login_username_ok: false,
      login_password_ok: false,
      login_username_warning: "",
      login_password_warning: "",
      face_login_show: true,
      time_out_warn:false
    };
  }
  componentDidMount() {
    //调用摄像头
    // this.defaultLogin();
    this.loadAccountInfo(); //记住密码
    ////////////////////////////////////////////////////////////////////////////////////////=自适应布局
    //进来的时候默认改变一下样式的大小
    var minSize = 60; //最小不能变了
    var maxSize = 80; //最大80不能在大
    var whdef = 100 / 1920; // 表示1920的设计图,使用100PX的默认值

    var wH = window.innerHeight; // 当前窗口的高度

    var wW = window.innerWidth; // 当前窗口的宽度
    var rem = wW * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
    if (rem > maxSize) {
      rem = maxSize;
    } else if (rem < minSize) {
      rem = minSize;
    }
    // rem=60
    $("html").css("font-size", rem + "px");
    $(window).resize(function() // 绑定到窗口的这个事件中

    {
      //改变rem
      var whdef = 100 / 1920; // 表示1920的设计图,使用100PX的默认值

      var wH = window.innerHeight; // 当前窗口的高度

      var wW = window.innerWidth; // 当前窗口的宽度
      var rem = wW * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
      //   console.log(   rem)
      if (rem > maxSize) {
        rem = maxSize;
      } else if (rem < minSize) {
        rem = minSize;
      }
      //   rem=60
      $("html").css("font-size", rem + "px");
    });

    // document.getElementById('login_left_right_wrap').offsetLeft
    var getOffsetLeft = function(obj) {
      var tmp = obj.offsetLeft;
      var val = obj.offsetParent;
      while (val != null) {
        tmp += val.offsetLeft;
        val = val.offsetParent;
      }
      return tmp;
    };
    var getOffsetTop = function(obj) {
      var tmp = obj.offsetTop;
      var val = obj.offsetParent;
      while (val != null) {
        tmp += val.offsetTop;
        val = val.offsetParent;
      }
      return tmp;
    };
    ////////////////////////////////////////////////////////////////////////////////////////=自适应布局
  }
  render() {
    return (
      <div className="login_all"> 
        {this.state.no_verify_toast && (
          <div className="login_clause_wrapper">
            <div className="login_clause_wrapper_verify_word">
              <p>正在审核中，请等待审核通过。如有疑问 </p>
              <p>请联系邮箱ai@yunlizhihui.com</p>
              <div className="login_clause_wrapper_sh"></div>
              <Button
                type="primary"
                className="login_clause_wrapper_yes_btn"
                onClick={() => {
                  this.setState(() => ({
                    no_verify_toast: false
                  }));
                }}
              >
                确定
              </Button>
            </div>
          </div>
        )}
        {this.state.showClause && (
          <div className="login_clause_wrapper">
            <div className="login_clause">
              <div className="login_header">
                <p className="login_header_p">云粒智慧AI应用集市服务条款</p>
              </div>
              <div className="login_content">
                <p className="login_content_p1">
                  欢迎来到云粒智慧AI应用集市！请您务必仔细阅读理解本服务条款（“本条款”），特别是免除或者限制责任的条款。您注册、登录云粒智慧AI应用集市即视为您阅读并同意本条款，如果您不同意接受，您应立即停止使用本服务。
                </p>
                <p className="login_content_p2">一、服务条款各方是谁？</p>
                <p className="login_content_p3">
                  您是本条款的一方（“您”或“用户”）。您确认：您是具备完全民事权利能力和完全民事行为能力的自然人、法人或其他组织。本条款的另一方是云粒智慧科技有限公司（“我们”）。
                </p>
                <p className="login_content_p4">
                  二、创建与登录账户需要注意什么？？
                </p>
                <div className="login_content_p5">
                  <p>
                    1、为使用本服务，您需根据流程创建一个账户。创建信息包括但不限于您的手机号码、邮箱、密码。您应当提供真实、准确、完整的信息，我们有权自行或委托第三方对这些信息进行审核，并将在审核通过后开通账号。
                  </p>
                  <p>
                    2、我们鼓励您使用复杂、不易破解且不同于您在任何其他服务中使用的密码。当您使用完毕后，应安全退出。
                  </p>
                  <p>
                    3、注册完成后，请您妥善保存有关账号和密码，如因您自身过错（包括但不限于提供信息不正确、转让账号和泄露账号信息等）或您所用计算机或其他终端产品感染病毒或木马，而导致账号密码泄漏、遗失或其他损失，后果将由您承担。
                  </p>
                </div>
                <p className="login_content_p2">
                  三、使用本服务，您有什么权利和义务？
                </p>
                <div className="login_content_p5">
                  <p>
                    1、您创建账户后，我们即授予您非独家、非排他、不可转让的使用本服务的权利。您有权拥有自己的userName和密码，并获得我们就该等服务提供的技术支持。
                  </p>
                  <p>
                    2、就您使用本服务提供的数据，您享有所有权、知识产权及其他相关权利。
                  </p>
                  <p>
                    3、您对使用本服务时提供数据的真实性、完整性、合法性负责。
                  </p>
                  <p>
                    4、您保证您在法律及本条款许可的范围内使用云粒智慧AI应用集市。您应按照我们的技术规范和安全要求提供数据，您不得提供带有病毒的、蠕虫的、木马的和其他有害的计算机代码、文件、脚本和程序。如您使用盗版或违规软件导致无法享受本服务，我们不承担责任。
                  </p>
                  <p>
                    5、您不得修改、翻译、改编、出租、转许可、在信息网络上传播或转让本服务，也不得通过逆向工程、反编译或试图以其他方式发现本服务的源代码。
                  </p>
                  <p>6、任何情况下，您不得有以下行为：</p>
                  <p>6.1、使用本服务从事任何非法活动。</p>
                  <p>
                    6.2、提供不适当内容（例如色情、暴力等违背法律、法规和社会公德的内容）。
                  </p>
                  <p>6.3、从事对本服务或他人有害的活动。</p>
                  <p>
                    6.4、侵犯他人的权利（例如，侵犯第三方知识产权或他人隐私等）。
                  </p>
                  <p>
                    6.5、以任何干扰、破坏、影响或抑制其他用户充分享受本服务，或任何可能损害、禁用、超负荷使用或妨碍服务正常工作的形式使用本服务。
                  </p>
                  <p>
                    6.6、未经第三方同意，获取或收集第三方电子邮件地址、通讯号码等信息。
                  </p>
                  <p>
                    6.7、使用任何机器人程序、蜘蛛程序、爬网程序、刮板或其他自动化方式或接口访问服务或提取数据。
                  </p>
                  <p>6.8、使用或试图使用您未得到授权的任何账户。</p>
                  <p>
                    6.9、冒充或以他人或任何实体的名义发布信息或歪曲您与他人或实体的关系。
                  </p>
                  <p>
                    6.10、企图规避我们可能会采用的任何内容筛选技术，或试图访问您无权访问的任何服务或区域。
                  </p>
                  <p>
                    7、非经我们事先书面许可，您不得向第三方转让或部分转让本服务或利用本服务进行销售或除自身业务外的其他商业用途。如您有需要将本服务用于除自身业务外的其他商业用途，应获得我们的事先书面授权。
                  </p>
                  <p>
                    8、您须对自己使用本服务的行为承担法律责任。您承担法律责任的形式包括但不限于：对受到侵害者进行赔偿；以及如我们因你的任何行为承担了行政处罚或赔偿责任，您应给予我们等额的赔偿。
                  </p>
                  <p>
                    9、如果我们发现或收到他人举报或投诉您违反本条款或法律、法规，我们有权不经通知随时对相关内容进行删除、屏蔽，并视行为情节对您的违规账号处以包括但不限于不予注册、通知限期改正、注销账号、中止或终止本服务等措施，并公告处理结果。如违反相关法律、法规及国家政策要求，我们有权对违法、违规的任何用户采取适当的法律行动，并依据法律、法规保存有关信息向相关主管部门报告等，您应承担由此而产生的一切法律责任。
                  </p>
                </div>
                <p className="login_content_p2">
                  四、为您提供服务，云粒智慧AI应用集市有什么权利和义务？
                </p>

                <div className="login_content_p5">
                  <p>
                    1、本服务及所有的后续升级版本以及本服务中任何图片、视频、音频、文本、板式、代码、文档的一切著作权、商标权、专利权、商业秘密、专有技术等知识产权及相关经济权利，均归我们完整而独立地享有。本条款不应被明示或暗示地解释为我们产品和服务或其任何相关知识产权或经济权利的转让。
                  </p>
                  <p>
                    2、若经过调查后，我们确定您的内容确已违反本条款，或者我们收到其他用户的投诉且调查确认违反本条款或法律、法规，收到知识产权侵权投诉，或者其他要求删除的行政/司法命令，我们有权删除、限制传播您提供的内容或停止提供本服务。为了保护本服务或其他用户，也为了保证本条款得到实施，我们还有权进一步采取行动。
                  </p>
                  <p>
                    3、我们在必要时对本服务进行维护或升级，将通过网站公告或站内信的方式通知您，您应当根据该等公告给予配合。由您未根据指示作为或不作为造成的损失，我们不予承担。
                  </p>
                  <p>
                    4、我们仅在本条款约定的范围或为您提供所需服务的目的而使用您的数据。对于您数据保护的约定，具体详见《云粒智慧AI应用集市隐私政策》。
                  </p>
                </div>
                <p className="login_content_p2">
                  五、不可抗力及云粒智慧AI应用集市的免责事由
                </p>
                <div className="login_content_p5">
                  <p>
                    1、不论在何种情况下，我们均不对由于信息网络的设备维护，连接故障，电脑、通讯或其他系统的故障，电力故障，罢工，劳动争议，暴乱，起义，骚乱，生产力或生产资料不足，人为事故，自然灾害，恐怖袭击，战争，政府行为，司法机关的命令或第三方的不作为及非我们原因而造成的不能服务或延迟服务承担责任。
                  </p>
                  <p>
                    2、我们不保证本服务无错误及不会中断、或不会受到病毒或任何其它因素的损害。除非有法律明确规定，我们在此明确声明不承担任何明示或默示的担保责任，包括但不限于对本服务适用性或不侵权的担保。
                  </p>
                  <p>
                    3、您明确理解并同意，您使用本服务时，我们承担的任何违约责任，不应超过您已支付的本服务的费用。如您使用本服务发生了任何直接、间接、附带、特别、衍生性或惩罚性损害赔偿，我们不对您承担责任。
                  </p>
                  <p>
                    4、我们对通过您间接接受本服务的第三方（包括但不限于您的最终用户）的损失不承担责任。
                  </p>
                </div>
                <p className="login_content_p2"> 六、服务条款会变更吗？</p>
                <div className="login_content_p5">
                  <p>
                    我们有权在必要时修改本条款。我们将在网站发布变更内容，也可能选择站内信或邮件向您发送变更通知。本条款变更后，您有权选择接受更新的服务条款或停止使用本服务。如果您继续使用本服务，即视为您已接受修改后的服务条款。
                  </p>
                </div>
                <p className="login_content_p2"> 七、本服务的中断、终止条件</p>
                <div className="login_content_p5">
                  <p> 1、本服务可能会中断、中止或终止。</p>
                  <p>
                    2、下列任何一种情形下，我们有权不经通知而中断或终止向您提供的服务：
                  </p>
                  <p>
                    2.1、您提供的个人资料不真实或未能通过我们或第三方验证机构的验证；
                  </p>
                  <p>2.2、您违反相关法律、法规或本条款的约定；</p>
                  <p>2.3、按照法律规定或主管部门的要求；</p>
                </div>
                <p className="login_content_p2"> 八、其他事项</p>
                <div className="login_content_p5">
                  <p>
                    1、您的服务被终止后，您使用本服务的权利将立即结束。我们不对您的内容的删除或未备份承担任何责任。本条款项下之保密、知识产权、法律适用与管辖相关条款以及性质上理应存续的其他条款（如对账户信息的真实性保证等），不因本条款的终止而失效。
                  </p>
                  <p>
                    2、本条款中的章节标题仅为方便检索而设，不具有任何法律或合同效力。
                  </p>
                  <p>
                    3、您同意，我们可在提供服务过程中进行商业信息推送，并且您同意接受我们通过电子邮件或其他方式向您发送促销或其他相关商业信息。
                  </p>
                  <p>
                    4、如果您对本条款内容有任何疑问，请发送邮件至我们的客服邮箱：【ai@yunlizhihui.com】。
                  </p>
                </div>
              </div>
              <div className="login_footer">
                <Button
                  type="primary"
                  className="login_footer_btn"
                  onClick={() => {
                    this.showClauseFalseFun();
                  }}
                >
                  已阅读此服务条款
                </Button>
              </div>
            </div>
          </div>
        )}
        {this.state.show_private_clause && (
          <div className="login_clause_wrapper">
            <div className="login_clause">
              <div className="login_header">
                <p className="login_header_p">云粒智慧AI应用集市隐私权政策</p>
              </div>
              <div className="login_content">
                <p className="login_content_p1">
                  云粒智慧科技有限公司及其关联公司（“我们”）尊重并保护您的隐私，我们将按照本隐私权政策（“本政策”）收集、使用您的个人/企业信息。请您务必仔细阅读理解本政策，特别与您的权益存在或可能存在重大关系的条款。您注册、登录云粒智慧AI应用集市或使用本服务（本服务定义见《服务条款》）即视为您阅读并同意本政策，如果您不同意接受，您应立即停止使用本服务。
                </p>
                <p className="login_content_p2">一、收集使用您的信息的目的？</p>
                <p className="login_content_p3">
                  我们收集、使用您的信息是出于遵守法律、法规以及向您提供本服务及提升服务质量的目的。
                </p>
                <p className="login_content_p4">二、我们如何收集您的信息？</p>
                <div className="login_content_p5">
                  <p>我们收集信息（“信息”）的范围主要包括：</p>
                  <p>
                    1、登录名和密码：为了识别您的身份，您注册云粒智慧AI应用集市账户或使本服务时，需要向我们提供一些真实、准确、完整的个人信息，包括但不限于您的电话号码、电子邮件地址等。
                  </p>
                  <p>
                    2、登录记录：为便于您查询账号状态或历史记录，也为遵守法律、法规，我们会保存您使用云粒智慧AI应用集市产生的信息，并按法律、法规对这些信息进行妥善保管。
                  </p>
                  <p>
                    3、为了保护您的账号安全，当您访问云粒智慧AI应用集市或使用本服务时，我们可能会记录您操作的相关信息，包括但不限于您的计算机
                    IP
                    地址、设备标识符、硬件型号、访问时间以及与本服务相关的日志信息。
                  </p>
                  <p>
                    4、您通过本服务加工以及通过其他方式处理的信息（包括财务、人事或业务数据）均为您的信息，您享有完全的所有权。云粒智慧AI应用集市仅在严格执行您的指示处理信息时，被处理的信息会进入我们的服务器，其余时间您的信息均在您自己的服务器内。
                  </p>
                  <p>
                    5、除上述信息外，我们还可能为了提供本服务及改进服务质量的合理需要而收集您的其他信息。与此同时，为提高您使用云粒智慧AI应用集市的安全性，更准确地预防钓鱼网站、短信欺诈和木马病毒，我们可能会通过了解一些您的网络使用习惯、您常用的软件信息等手段来判断您账户的风险。
                  </p>
                  <p>
                    6、我们会在您的计算机或移动设备上存储名为
                    cookies的小数据文件。借助于
                    cookies，网站能够存储您的偏好等信息。您可以选择接受或者拒绝cookies，如您选择拒绝cookies，则您有可能无法登录或使用依赖于cookies的服务或者功能。
                  </p>
                </div>
                <p className="login_content_p2">三、我们如何保护您的信息？</p>
                <div className="login_content_p5">
                  <p>
                    1、我们会采取合理可行的措施，尽力避免收集无关的信息。您的信息将保存在我们的服务器上。我们努力采取各种合理的物理、电子和管理方面的安全措施来保护您的信息（包括但不限于通过https的方式提供浏览服务或通过网络安全层软件（SSL）进行加密保护及部署访问控制机制），使您的信息不会被泄漏、毁损或者丢失。
                  </p>
                  <p>
                    2、我们对可能接触到您的信息的员工也采取了严格管理，包括但不限于根据不同岗位采取不同的权限控制，签署保密协议，监控操作情况等。
                  </p>
                </div>
                <p className="login_content_p2">四、我们如何使用您的信息？</p>

                <div className="login_content_p5">
                  <p>我们会把您的信息用于下列用途：</p>
                  <p>
                    1、向您提供本服务并维护、改进该等服务，或分析及提升对该等服务的运营效率。例如，通过了解您的浏览信息、设备信息等手段来判断您的账号风险，并记录一些我们认为有风险的链接（“URL”）。{" "}
                  </p>
                  <p>2、确认信息的准确性，并与第三方进行验证。 </p>
                  <p>
                    3、为使您知晓自己使用本服务的情况或了解本服务，向您发送服务状态的通知、营销活动及其他商业性电子信息。
                  </p>
                  <p>4、预防或禁止非法的活动。</p>
                  <p>5、经您许可的其他用途。</p>
                </div>
                <p className="login_content_p2">五、信息安全的免责条款</p>
                <div className="login_content_p5">
                  <p>
                    1、您应对您的个人信息及您使用本服务上传的信息来源及内容负责。因您提供或上传的信息违反法律、法规、部门规章或国家政策而造成的全部结果及责任均由您自行承担。{" "}
                  </p>
                  <p>
                    2、如果您提供的个人信息或相关资料错误、不实或不完整（包括未及时根据实际情况更新），我们有权暂停或终止向您提供本服务，我们对此不承担责任。
                  </p>
                  <p>
                    3、我们使用各种安全技术和程序，以防信息的丢失、不当使用、未经授权披露。但请您理解，由于技术的限制以及可能存在的各种恶意手段，在互联网行业，即便竭尽所能加强安全措施，也不可能始终保证信息百分之百的安全。因此您的信息可能非因我们或我们所能控制的原因而丢失，包括但不限于他人非法利用，您下载安装的其他软件或访问的其他网站中可能含有病毒、木马程序或其他恶意程序，继而影响我们提供的服务的正常使用等。对此，我们不承担责任。
                  </p>
                  <p>
                    4、在不幸发生信息安全事件（“事件”）后，我们将按照法律、法规的要求，及时向您告知：安全事件的基本情况和可能的影响、我们已采取或将要采取的处置措施、您可自主防范和降低风险的建议、对您的补救措施等。我们同时将及时将事件相关情况以邮件、信函、电话、推送通知等方式告知您，难以逐一告知时，我们会采取合理、有效的方式发布公告。同时，我们还将按照监管部门要求，主动上报信息安全事件的处置情况。
                  </p>
                  <p>
                    5、在收集您的信息后，我们可能会通过技术手段对您的信息进行脱敏。我们有权在不透露您的信息的前提下使用已经脱敏的信息。
                  </p>
                </div>
                <p className="login_content_p2">六、对第三方责任的声明</p>
                <div className="login_content_p5">
                  <p>
                    1、本政策仅适用于我们所收集的信息，并不适用于任何第三方提供的服务或第三方的信息使用规则，我们对第三方使用由您提供的信息不承担任何责任。
                  </p>
                  <p>
                    2、请您注意，您使用的支付渠道、您访问的第三方网站经营者、您使用的第三方服务提供者可能有自己的隐私权保护政策。
                  </p>
                  <p>
                    3、若您利用本服务，为您的用户再行提供服务，因您的信息属于您所有，您应当另行与您的用户约定隐私权政策。
                  </p>
                </div>
                <p className="login_content_p2"> 七、如果您是未成年人？</p>
                <div className="login_content_p5">
                  <p>
                    我们重视未成年人的个人信息保护，如您为未成年人，建议请您的监护人确认使用本服务的必要性。如您的监护人确认需要使用本服务，请您要求您的监护人以其自己的名义注册并使用本服务。
                  </p>
                </div>
                <p className="login_content_p2">八、本政策是否会修订？</p>
                <div className="login_content_p5">
                  <p>
                    1、我们可能不时会对本政策进行变更，我们将以网站公告的方式予以公布而不再另行单独通知您，该等变更将在公告载明的时间生效。若您在本政策变更后继续使用本服务的任何部分，这代表您已充分阅读、理解并接受修改后的本政策并受之约束。
                  </p>
                  <p>
                    2、如您对本政策的内容有任何疑问和意见，可通过【ai@yunlizhihui.com】与我们联系。
                  </p>
                </div>
              </div>
              <div className="login_footer">
                <Button
                  type="primary"
                  className="login_footer_btn"
                  onClick={() => {
                    this.show_private_clauseFunFalse();
                  }}
                >
                  已阅读此服务条款
                </Button>
              </div>
            </div>
          </div>
        )}

        <div className="login_logo"></div>
        <div className="login_left_right_wrap_wrap">
          <div className="login_left_right_wrap" id="login_left_right_wrap">
            <div className="login_left_part">
              <div className="login_left_part_word">云粒智慧AI应用集市</div>
            </div>

            <div className="login_right_part">
              {/* <div className="face_login_div"></div>
              <div
                className="face_login_div_hide"
                onClick={() => {
                  this.setState(() => ({
                    login_right_part_face_login_div_show: true
                  }));
                  setTimeout(
                      () => {
                        this.getMedia();
                      },100)
             
                }}
              ></div> */}
              {this.state.loginDisplay && (
                <Fragment>
                  <div className="login_login_word1">登录</div>
                  <div className="login_right_part_line1"></div>
                  <div
                    className="login_login_word2"
                    onClick={() => {
                      this.changeToRegister();
                    }}
                  >
                    注册
                  </div>

                  <div className="login_right_part_line2"></div>
                  <div className="login_right_part_input_wrap">
                    <div className="login_right_part_icon"> </div>
                    <div className="login_right_part_input_div">
                      <input
                        className="login_right_part_input"
                        type="text"
                        placeholder="用户名"
                        value={this.state.username}
                        onChange={e => {
                          this.handle_login_input_user_change(e);
                        }}
                        onBlur={e => {
                          this.handleInputBlur(e);
                        }}
                        ref={inputUser => {
                          this.inputUser = inputUser;
                        }}
                      />
                    </div>
                    <div className="login_right_part_border"></div>
                    <div className="login_input_warning_username">
                      {this.state.login_username_warning}
                    </div>
                  </div>

                  <div className="login_right_part_input_wrap">
                    <div className="login_right_part_icon login_right_part_icon_password">
                      {" "}
                    </div>
                    <div className="login_right_part_input_div">
                      <input
                        className="login_right_part_input"
                        type="password"
                        placeholder="密码"
                        value={this.state.password}
                        onChange={e => {
                          this.handle_login_input_password_change(e);
                        }}
                        onBlur={e => {
                          this.handlePasswordInputBlur(e);
                        }}
                        ref={inputPassword => {
                          this.inputPassword = inputPassword;
                        }}
                      />
                    </div>
                    <div className="login_right_part_border"></div>
                    <div className="login_input_warning_username">
                      {this.state.login_password_warning}
                    </div>
                  </div>
                  <div className="login_right_part_remember_password_wrap">
                    <input
                      type="checkbox"
                      className="login_right_part_remember_password_square"
                      id="login_right_part_remember_password_square"
                      onClick={e => {
                        this.rememberPassword(e);
                      }}
                    />
                    <div className="login_right_part_remember_password">
                      记住密码
                    </div>
                  </div>

                  <div className="div_username_password_false">
                    {this.state.username_or_password_false_warn}
                  </div>

                  {/* 登录页未授权提示 */}
                  <div className="login_right_part_unauthorized">
                    <p> {this.state.unauthorized_warn_a}</p>
                    <p> {this.state.unauthorized_warn_b}</p>
                  </div>

                  {/* 登录页登录按钮 */}
                  <button
                    className="login_right_part_btn"
                    onClick={() => {
                      this.login();
                    }}
                  >
                    登录
                  </button>
                </Fragment>
              )}
              {!this.state.loginDisplay && (
                <div className="login_right_part_register">
                  <div
                    className="login_right_part_register_word1"
                    onClick={() => {
                      this.changeTologin();
                    }}
                  >
                    登录
                  </div>
                  <div className="login_right_part_register_line"></div>
                  <div className="login_right_part_register_word2">注册</div>
                  <div className="login_right_part_register_line2"></div>
                  <div className="login_right_part_register_input_template_wrap">
                    <div className="login_right_part_register_input_template1">
                      {/* <div className="login_right_part_register_must_write"></div> */}
                      <div className="login_right_part_register_input_icon"></div>
                      <input
                        type="text"
                        className="login_right_part_register_input"
                        placeholder="用户名"
                        onBlur={e => {
                          this.handleUserNameChange(e);
                        }}
                        ref={inputUserName => {
                          this.inputUserName = inputUserName;
                        }}
                      />
                      <div className="login_right_part_register_border"></div>
                      <div className="login_right_part_input_warning">
                        {this.state.username_warning}
                      </div>
                    </div>
                    <div className="login_right_part_register_input_template2">
                      <div className="login_right_part_register_input_template">
                        <div className="login_right_part_register_input_icon"></div>
                        <input
                          type="text"
                          className="login_right_part_register_input"
                          placeholder="手机号"
                          onBlur={e => {
                            this.handlePhoneInputChange(e);
                          }}
                          ref={inputPhone => {
                            this.inputPhone = inputPhone;
                          }}
                        />
                        {/* {this.state.showPhoneIcon && (
                        <img
                           className="login_right_part_register_input_cuowu"
                          src={require("../../assets/img/Login/cuowu.png")}
                          alt=""
                        />
                      )} */}
                        <div className="login_right_part_register_border"></div>
                        <div className="login_right_part_input_warning">
                          {this.state.phone_warning}
                        </div>
                      </div>
                    </div>
                    <div className="login_right_part_register_input_template3">
                      <div className="login_right_part_register_input_icon login_right_part_register_input_icon_email"></div>
                      <input
                        type="text"
                        className="login_right_part_register_input"
                        placeholder="邮箱"
                        onBlur={e => {
                          this.handleEmailInputChange(e);
                        }}
                        ref={inputEmail => {
                          this.inputEmail = inputEmail;
                        }}
                      />
                      {/* {this.state.showEmailIcon && (
                      <img
                         className="login_right_part_register_input_cuowu"
                        src={require("../../assets/img/Login/cuowu.png")}
                        alt=""
                      />
                    )} */}
                      <div className="login_right_part_register_border"></div>
                      <div className="login_right_part_input_warning">
                        {this.state.email_warning}
                      </div>
                    </div>
                    <div className="login_right_part_register_input_template4">
                      {/* <div className="login_right_part_register_must_write"></div> */}
                      <div className="login_right_part_register_input_icon"></div>
                      <input
                        type="password"
                        className="login_right_part_register_input"
                        placeholder="密码 6-20个字符，包含数字和字母"
                        onBlur={e => {
                          this.handleRegistPasswordInputChange(e);
                        }}
                        ref={inputRegistPassword => {
                          this.inputRegistPassword = inputRegistPassword;
                        }}
                      />
                      {/* {this.state.showPasswordIcon && (
                      <img
                         className="login_right_part_register_input_cuowu"
                        src={require("../../assets/img/Login/cuowu.png")}
                        alt=""
                      />
                    )} */}
                      <div className="login_right_part_register_border"></div>
                      <div className="login_right_part_input_warning">
                        {this.state.password_warning}
                      </div>
                    </div>
                    <div className="login_right_part_register_input_template5">
                      {/* <div className="login_right_part_register_must_write"></div> */}
                      <div className="login_right_part_register_input_icon"></div>
                      <input
                        type="password"
                        className="login_right_part_register_input"
                        placeholder="确认密码"
                        onBlur={e => {
                          this.handleRegistConfirmPasswordInputChange(e);
                        }}
                        ref={inputRegistConfirmPassword => {
                          this.inputRegistConfirmPassword = inputRegistConfirmPassword;
                        }}
                      />
                      {/* {this.state.showConfirmPasswordIcon && (
                      <img
                         className="login_right_part_register_input_cuowu"
                        src={require("../../assets/img/Login/cuowu.png")}
                        alt=""
                      />
                    )} */}

                      <div className="login_right_part_register_border"></div>
                      <div className="login_right_part_input_warning">
                        {this.state.confirm_password_warning}
                      </div>
                    </div>
                  </div>
                  <div className="login_right_part_register_agreement_wrap">
                    <input
                      className="login_right_part_register_square"
                      onClick={e => {
                        this.checkbox(e);
                      }}
                      type="checkbox"
                    />
                    <div className="login_right_part_register_agreement">
                      阅读并同意
                      <a
                        href="javaScript:void(0)"
                        onClick={e => {
                          this.showClauseFun();
                        }}
                      >
                        《云粒智慧AI应用集市服务条款》
                      </a>
                      |
                      <a
                        href="javaScript:void(0)"
                        onClick={e => {
                          this.show_private_clauseFun();
                        }}
                      >
                        《云粒智慧AI应用集市隐私权政策》
                      </a>
                    </div>
                  </div>

                  <div className="login_right_part_register_agreement_warn">
                    {this.state.agreement_warn}
                  </div>
                  <button
                    className="login_right_part_register_btn"
                    onClick={() => {
                      this.regist();
                    }}
                  >
                    同意条款并注册
                  </button>
                </div>
              )}
            </div>
            {this.state.login_right_part_face_login_div_show && (
              <div className="login_right_part_face_login_div">
                <div className="login_right_part_face_login_div_desc_div">
                  内部员工刷脸登录
                </div>
                <div className="face_to_login_div"></div>
                <div
                  className="face_to_login_div_hide"
                  onClick={() => {
                    this.setState(() => ({
                      login_right_part_face_login_div_show: false,
                      face_login_show: true,
                      time_out_warn:false
                    }));
                  }}
                ></div>
                <div>
                  <video id="video" autoplay="autoplay"></video>

                  {this.state.video_show && (
                    <div className="video_square"></div>
                    // <div>
                    //   <div className="login_right_part_face_login_div_border1"></div>
                    //   <div className="login_right_part_face_login_div_border2"></div>
                    //   <div className="login_right_part_face_login_div_border3"></div>
                    //   <div className="login_right_part_face_login_div_border4"></div>
                    //   <div className="login_right_part_face_login_div_border5"></div>
                    //   <div className="login_right_part_face_login_div_border6"></div>
                    //   <div className="login_right_part_face_login_div_border7"></div>
                    //   <div className="login_right_part_face_login_div_border8"></div>
                    // </div>
                  )}
                  <div className="login_right_part_face_login_div_warn">
                    {this.state.time_out_warn}
                  </div>
                  <canvas
                    id="canvas_camera"
                    width="500px"
                    height="500px"
                    marginLeft="300px"
                    style={{ display: "none" }}
                  ></canvas>
                </div>
                {/* {this.state.face_login_show && (
                  <Button
                    type="primary"
                    onClick={() => {
                      this.getMedia();
                    }}
                    className="face_login"
                  >
                    人脸登录
                  </Button>
                )} */}
                {!this.state.face_login_show && (
                  <Button
                    type="primary"
                    onClick={() => {
                      this.getMedia();
                    }}
                    className="face_login"
                  >
                    重新刷脸
                  </Button>
                )}
              </div>
            )}
          </div>
        </div>
      </div>
    );
  }
  // defaultLogin() {
  //   let that = this;
  //   let params = new FormData();
  //   params.append("user", "yunlidemo01");
  //   params.append("password", "a123456");
  //   LOGIN(params).then(res => {
  //     that.setState(() => ({
  //       defaultLogin_token: res.data.token
  //     }));
  //   });
  // }
  // getMedia() {
  //   var that = this;
  //   let video = document.getElementById("video");
  //   let constraints = {
  //     video: { width: 500, height: 500 },
  //     audio: true
  //   };
  //   /*
  //     这里介绍新的方法:H5新媒体接口 navigator.mediaDevices.getUserMedia()
  //     这个方法会提示用户是否允许媒体输入,(媒体输入主要包括相机,视频采集设备,屏幕共享服务,麦克风,A/D转换器等)
  //     返回的是一个Promise对象。
  //     如果用户同意使用权限,则会将 MediaStream对象作为resolve()的参数传给then()
  //     如果用户拒绝使用权限,或者请求的媒体资源不可用,则会将 PermissionDeniedError作为reject()的参数传给catch()
  //     */
  //   let promise = navigator.mediaDevices.getUserMedia(constraints);
  //   promise
  //     .then(function(MediaStream) {
  //       video.srcObject = MediaStream;
  //       video.play();
  //       setTimeout(() => {
  //         that.setState(() => ({
  //           video_show: true
  //         }));
  //       }, 1000);
  //     })
  //     .catch(function(PermissionDeniedError) {
  //       console.log(PermissionDeniedError);
  //     });
      
  //   var times = -1;
  //   var timer = setInterval(() => {
  //     console.log(times);
  //     times = times + 1;
  //     if (times === 3) {
  //       that.setState(() => ({
  //         time_out_warn: "未捕捉到已授权人脸",
  //         face_login_show: false
  //       }));
  //       clearInterval(timer);
  //     } else {
  //       that.setState(() => ({
  //         time_out_warn: "",
  //         face_login_show: true
  //       }));
  //       //获得Canvas对象
  //       let canvas = document.getElementById("canvas_camera");
  //       let ctx = canvas.getContext("2d");
  //       ctx.drawImage(video, 0, 0, 500, 500);
  //       var imgUrl = canvas.toDataURL();
  //       imgUrl = imgUrl.replace("data:image/png;base64,", "base64://");
  //       imgUrl = imgUrl.replace("data:image/jpg;base64,", "base64://");
  //       imgUrl = imgUrl.replace("data:image/jpeg;base64,", "base64://");
  //       let params = new FormData();
  //       params.append("src", imgUrl);

  //       FACELOGIN(params).then(res => {
  //         console.log(res);
  //         if (res.code === 200) {
  //           try {
  //             if (res.data[0].vec.length > 10) {
  //               //存在人脸
  //               let vecList = "base64://" + res.data[0].vec;
  //               let params = new FormData();
  //               params.append("src", vecList);
  //               params.append("top", 20); //默认选择20个
  //               SEARCHTHING(params, that.state.defaultLogin_token).then(res => {
  //                 if (res.code === 200) {
  //                   try {
  //                     if (res.data[0]["fnd-id"]) {
  //                       localStorage.setItem(
  //                         "token",
  //                         that.state.defaultLogin_token
  //                       );
  //                       that.setState(() => ({
  //                         time_out_warn: "欢迎登录: " + res.data[0]["fnd-id"]
  //                       }));
  //                       setTimeout(() => {
  //                         this.props.history.push("/home");
  //                       }, 2000);

  //                       clearInterval(timer);
  //                     }
  //                   } catch (err) {
  //                     console.log(err);
  //                   }
  //                 }
  //               });
  //             }
  //           } catch (err) {
  //             console.log("暂时尚未检测到对应人脸");
  //           }
  //         } else {
  //           console.log("网络错误");
  //         }
  //       });
  //     }
  //   }, 1000);
  // }

  handle_login_input_password_change(e) {
    let value = e.target.value;
    this.setState(() => ({
      password: value
    }));
  }
  handle_login_input_user_change(e) {
    let value = e.target.value;
    this.setState(() => ({
      username: value
    }));
  }
  //判断cookie中是否有账号信息，有就可以进行预填写，没有则直接返回
  loadAccountInfo = () => {
    let arr,
      reg = new RegExp("(^| )" + "accountInfo" + "=([^;]*)(;|$)");
    let accountInfo = "";
    if ((arr = document.cookie.match(reg))) {
      accountInfo = unescape(arr[2]);
    } else {
      accountInfo = null;
    }

    if (Boolean(accountInfo) == false) {
      return false;
    } else {
      let userName = "";
      let passWord = "";
      let typeLogin = "";

      let i = new Array();
      i = accountInfo.split("&");
      (userName = i[0]), (passWord = i[1]), (typeLogin = i[2]);
      this.setState({
        username: userName,
        password: passWord,
        // rememberPassword: true,
        typeLogin: typeLogin
      });
      document
        .getElementById("login_right_part_remember_password_square")
        .click();
    }
  };

  rememberPassword(e) {
    if (e.target.checked) {
      this.setState(() => ({
        rememberPassword: true
      }));
    } else {
      this.setState(() => ({
        rememberPassword: false
      }));
    }
  }
  showClauseFalseFun() {
    this.setState(() => ({
      showClause: false
    }));
  }
  showClauseFun() {
    this.setState(() => ({
      showClause: true
    }));
  }
  show_private_clauseFun() {
    this.setState(() => ({
      show_private_clause: true
    }));
  }
  show_private_clauseFunFalse() {
    this.setState(() => ({
      show_private_clause: false
    }));
  }
  validate(style) {
    if (style === "forlogin") {
    }
    if (this.state.registUsername === "") {
      this.setState(() => ({
        username_warning: "用户名不能为空"
      }));
    } else {
      this.setState(() => ({
        username_warning: "",
        regist_username_ok: true
      }));
    }

    var patt1 = new RegExp(/^1[3456789]\d{9}$/);
    var result = patt1.test(this.state.registPhone);
    if (this.state.registPhone === "") {
      this.setState(() => ({
        phone_warning: "手机号码不能为空"
      }));
    } else if (!result) {
      this.setState(() => ({
        phone_warning: "请输入正确的手机号码"
      }));
    } else {
      this.setState(() => ({
        phone_warning: "",
        regist_phone_ok: true
      }));
    }

    var patt1 = new RegExp(
      /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
    );
    var email_result = patt1.test(this.state.registEmail);
    if (this.state.registEmail === "") {
      this.setState(() => ({
        email_warning: "邮箱不能为空"
      }));
    } else if (!email_result) {
      this.setState(() => ({
        email_warning: "请输入正确的邮箱"
      }));
    } else {
      this.setState(() => ({
        email_warning: "",
        regist_email_ok: true
      }));
    }

    var patt1 = new RegExp(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/);
    var password_result = patt1.test(this.state.registPassword);
    if (this.state.registPassword === "") {
      this.setState(() => ({
        password_warning: "密码不能为空"
      }));
    } else if (!password_result) {
      this.setState(() => ({
        password_warning: "密码格式不正确"
      }));
    } else {
      this.setState(() => ({
        password_warning: "",
        regist_password_ok: true
      }));
    }
    if (this.state.registPassword != this.state.registConfirmPassword) {
      this.setState(() => ({
        confirm_password_warning: "两次输入密码不一致,请重新输入"
      }));
    } else {
      this.setState(() => ({
        confirm_password_warning: "",
        regist_confirm_password_ok: true
      }));
    }
  }

  async regist() {
    await this.validate();
    if (this.state.agreed) {
      this.setState(() => ({
        agreement_warn: ""
      }));
      if (
        this.state.regist_username_ok &&
        this.state.regist_email_ok &&
        this.state.regist_phone_ok &&
        this.state.regist_password_ok &&
        this.state.regist_confirm_password_ok
      ) {
        let params = new FormData();
        params.append("username", this.state.registUsername);
        params.append("realname", this.state.registUsername);
        params.append("passwd", this.state.registPassword);
        params.append("email", this.state.registEmail);
        params.append("phone", this.state.registPhone);
        console.log(this.state);
        let that = this;
        REGISTER(params).then(res => {
          if (res.code === 500) {
            if (
              res.exp.indexOf("用户名") > -1 &&
              res.exp.indexOf("已存在") > -1
            ) {
              that.setState(() => ({
                username_warning: res.exp.split(":")[1]
              }));
            }

            if (
              res.exp.indexOf("电话号码") > -1 &&
              res.exp.indexOf("已存在") > -1
            ) {
              that.setState(() => ({
                phone_warning: res.exp.split(":")[1]
              }));
            }
            if (
              res.exp.indexOf("邮箱") > -1 &&
              res.exp.indexOf("已存在") > -1
            ) {
              that.setState(() => ({
                email_warning: res.exp.split(":")[1]
              }));
            }
          }
          if (res.code === 200) {
            message.info("恭喜您注册成功");
          }
        });
      }
    } else {
      this.setState(() => ({
        agreement_warn: "请同意用户协议"
      }));
    }
  }

  changeTologin() {
    console.log("执行了changeTologin");
    this.setState(() => ({
      loginDisplay: true
    }));
  }
  checkbox(e) {
    if (e.target.checked) {
      this.setState(() => ({
        agreed: true
      }));
    } else {
      this.setState(() => ({
        agreed: false
      }));
    }
  }

  changeToRegister() {
    this.setState(() => ({
      loginDisplay: false
    }));
  }
  handleRegistConfirmPasswordInputChange(e) {
    const inputRegistConfirmPassword = this.inputRegistConfirmPassword.value;
    this.setState(() => ({
      registConfirmPassword: inputRegistConfirmPassword
    }));
  }
  handleRegistPasswordInputChange(e) {
    const inputRegistPassword = this.inputRegistPassword.value;

    var patt1 = new RegExp(/^([a-z0-9\.\@\!\#\$\%\^\&\*\(\)]){6,20}$/i);

    var result = patt1.test(inputRegistPassword);
    result = 1;
    if (result) {
      this.setState(() => ({
        registPassword: inputRegistPassword,
        showPasswordIcon: false
      }));
    } else {
      this.setState(() => ({
        registPassword: "",
        showPasswordIcon: true
      }));
    }
  }
  handleEmailInputChange(e) {
    const inputEmail = this.inputEmail.value;
    this.setState(() => ({
      registEmail: inputEmail,
      showEmailIcon: false
    }));
  }
  handlePhoneInputChange(e) {
    const inputPhone = this.inputPhone.value;
    this.setState(() => ({
      registPhone: inputPhone,
      showPhoneIcon: false
    }));
  }
  handleUserNameChange(e) {
    const inputUserName = this.inputUserName.value;
    this.setState(() => ({
      registUsername: inputUserName
    }));
  }
  handleInputBlur(e) {
    const inputUser = this.inputUser.value;
    this.setState(() => ({
      username: inputUser
    }));
  }
  handlePasswordInputBlur(e) {
    const inputPassword = this.inputPassword.value;
    this.setState(() => ({
      password: inputPassword
    }));
  }
  checklogin() {
    if (this.state.username === "") {
      this.setState(() => ({
        login_username_warning: "请输入用户名",
        login_username_ok: false
      }));
    } else {
      this.setState(() => ({
        login_username_warning: "",
        login_username_ok: true
      }));
    }
    if (this.state.password === "") {
      this.setState(() => ({
        login_password_warning: "请输入密码",
        login_password_ok: false
      }));
    } else {
      this.setState(() => ({
        login_password_warning: "",
        login_password_ok: true
      }));
    }
  }

  async login() {
    this.setState(() => ({
      //清空当前所有状态
      username_or_password_false_warn: "",
      unauthorized_warn_a: "",
      unauthorized_warn_b: ""
    }));
    //记住密码功能
    var that = this;
    console.log(this.state.rememberPassword);
    if (this.state.rememberPassword) {
      //设置了记住密码
      let accountInfo =
        this.state.username +
        "&" +
        this.state.password +
        "&" +
        this.state.typeLogin;
      let Days = 3; //cookie保存时间
      let exp = new Date();
      exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
      document.cookie =
        "accountInfo" +
        "=" +
        escape(accountInfo) +
        ";expires=" +
        exp.toGMTString();
    } else {
      let exp = new Date();
      exp.setTime(exp.getTime() - 1);
      let accountInfo = document.cookie;
      var cookie_pos = accountInfo.indexOf("accountInfo");

      if (cookie_pos != -1) {
        document.cookie =
          "accountInfo" + "=" + " " + ";expires=" + exp.toGMTString();
      }
    }
    await this.checklogin();
    if (this.state.login_username_ok && this.state.login_password_ok) {
      let params = new FormData();
      params.append("user", this.state.username);
      params.append("password", this.state.password);

      LOGIN(params).then(
        res => {
          console.log(res);
          let tokens = res.data.token;
          if (res.exp.indexOf("用户名或密码不正确") > -1) {
            that.setState(() => ({
              username_or_password_false_warn: "用户名或密码不正确"
            }));
          } else if (res.exp.indexOf("该租户下不存在该用户") > -1) {
            that.setState(() => ({
              username_or_password_false_warn: "用户名或密码不正确"
            }));
          }
          if (res.code === 200) {
            AUTHORIZATION(res.data.token)
              .then(res => {
                console.log(res);
                if (res.code === 200) {
                  that.setState(() => ({
                    unauthorized_warn_a: "",
                    unauthorized_warn_b: ""
                  }));
                  localStorage.setItem('user',that.state.username)
                  localStorage.setItem("token", tokens);
                  that.props.AdminStore.change_token(tokens)
                  //跳转到home页面
                  this.props.history.push("/home");
                } else if (res.code === 500) {
                  if (res.exp.indexOf("unauthorized") > -1) {
                    that.setState(() => ({
                      unauthorized_warn_a:
                        "正在审核中，请等待审核通过。如有疑问，",
                      unauthorized_warn_b: "请联系邮箱 ai@yunlizhihui.com"
                    }));
                  } else {
                    that.setState(() => ({
                      unauthorized_warn_a: "",
                      unauthorized_warn_b: ""
                    }));
                  }
                }
              })
              .catch(err => {
                console.log("rejected", err);
              });
          }
        }
      );
    }
  }
}
